<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<title><?php echo $html['title'] ?></title>
	<script type="text/javascript" src="./_include/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#bigFrame img').attr('src', $('.inGallery table td:first ').attr('href')).addClass('selected');
		//$('#bigFrame img').attr('src', $('.inGallery table td:first '));
		var moveDelta = 350; /// czyli o ile bÄdzie przesuwany slajd ze zdjÄciami
		$('#moveRight').click(function(){
			totalWidth = $('.inGallery table').width(); /// caĹkowita szerokoĹÄ tableki-"slajdu"
			layerWidth = $('.inGallery').width(); /// szerkoĹÄ "przysĹony" slajdu
			tblLeft = parseInt( $('.inGallery table').css('left') ); /// bierzÄca pozycja-wartoĹÄ left dla slajdu
			endMove = layerWidth - totalWidth; /// czyli jak najdalej moĹźna przesunÄÄ zdjÄcia "w prawo"
			var slideMove = (tblLeft - moveDelta) < endMove ? endMove : (tblLeft - moveDelta);
			$('.inGallery table').animate({ left: slideMove }, 450);
		});
		$('#moveLeft').click(function(){
			totalWidth = $('.inGallery table').width();
			layerWidth = $('.inGallery').width();
			tblLeft = parseInt( $('.inGallery table').css('left') );
			var slideMove = tblLeft + moveDelta > 0 ? 0 : tblLeft + moveDelta;
			$('.inGallery table').animate({ left: slideMove }, 450);
		});
		$('.inGallery table td').fadeTo(0, .5).hover(function(){
			$(this).fadeTo(300, 1);
		}, function(){
			$(this).fadeTo(500, .5);
		}).click(function(){
			$('.inGallery table td').removeClass('selected');
			$(this).addClass('selected').fadeTo(0, 1);
			//alert($(this).attr('hef'));
			$('#gallery div#bigFrame img').attr( 'src', $(this).attr('href') );
			/* trzeba bÄdzie zrobiÄ tak, Ĺźe pierwsze zdjÄcie bÄdzie automatycznie wstawiane do bigframe */
		});
	});
	</script>
	<link rel="stylesheet" href="./_include/default.css" type="text/css" media="screen" />
	<style type="text/css">
	html, body{
		font: 12px verdana;
		background: #000;
		color: #fff;
	}
	#gallery{
		width: 960px;
		margin: 0 auto;
		text-align: center;
	}
	.inGallery{
		height: 104px;
		overflow: hidden;
		position: relative; /* fix dla IE Ĺźeby respektowaĹ overflow... jebane gĂłwno. */
	}
	.inGallery table{ /*z racji faktu, Ĺźe mamy tylko jednÄ tabelÄ ;-)*/
		position: absolute;
		left: 0px;
	}
	.inGallery table td.selected{
		background: #888;
	}
	.inGallery table td{
		background: none;
		postion: relative;
		height: 104px;
		vertical-align: middle;
	}
	#moveLeft, #moveRight{ font-size: 30px; background: black; color: white; border: none; }
	</style>
</head>
<body>

<!--[if IE]><center><![endif]-->
<div id="gallery">
<div id="bigFrame"><img/></div>
<div class="inGallery">
<table cellspacing='0'><tr>
<?php
if( count($html['thumbs'])>0 )
foreach( $html['thumbs'] as $_thumb )
	printf( '<td title="%s" href="%s" rel="lightbox-gal"><img alt="%s" src="%s"/></td>'."\n",
		$_thumb['title'], $_thumb['url'], $_thumb['title'], $_thumb['src']);
?>

</tr></table>
</div>
<input type="button" id="moveLeft" value="&larr;"/>
<input type="button" id="moveRight" value="&rarr;"/>
<br/>&copy; 2008 by &Aring;&lambda;&kappa;&epsilon;m&iota;&cent;
</div>
<div style="text-align: center; color: #000;">Powered by <b title="Simple Gallery by Daniel Alkemic Czuba">Simple Gallery</b> v.<?php echo $html['version'] ?></div>

<!--[if IE]></center><![endif]-->
</body>
</html>

<?php echo $html['path']?>
<?php
if( count($html['dirs'])>0 ) foreach( $html['dirs'] as $_dir )
	printf( '<span><a href="%s"><img alt="%s" src="%s" style="width:24px;height:24px;"/>%s</a></span>'."\n",
		$_dir['url'], $_dir['name'], $_dir['icon'], $_dir['name'] );
?>

<div style="clear:both;"></div>
<form action="" method="post">
	Layout: <select name="setlayout" onchange="this.form.submit();">
		<option value="thumb" selected>Thumbnails</option>
		<option value="slide">Slideshow</option>
	</select>
</form>
</div>
